<template>
  <div class="body">
    <van-tabs>
      <van-tab title="流行">
        <div class="header">
          <div v-for="(item, index) in List" :key="index">
            <img
              :src="item.showLarge.img"
              class="img1"
              alt=""
              @click="goDel(item.iid)"
            />
            <span class="title"> {{ item.title }} </span>
            <p class="price">
              <span style="color:#FF8198">
                {{ item.price }}
              </span>
              <van-icon name="star-o" />
              <span>
                {{ item.cfav }}
              </span>
            </p>
          </div>
        </div>
      </van-tab>
      <van-tab title="新款">
        <div class="header">
          <div v-for="(item, index) in List2" :key="index">
            <img
              :src="item.showLarge.img"
              class="img1"
              alt=""
              @click="goDel(item.iid)"
            />
            <span class="title"> {{ item.title }} </span>
            <p class="price">
              <span style="color:#FF8198">
                {{ item.price }}
              </span>
              <van-icon name="star-o" />
              <span>
                {{ item.cfav }}
              </span>
            </p>
          </div>
        </div>
      </van-tab>
      <van-tab title="精选">
        <div class="header">
          <div v-for="(item, index) in List3" :key="index">
            <img
              :src="item.showLarge.img"
              class="img1"
              alt=""
              @click="goDel(item.iid)"
            />
            <span class="title"> {{ item.title }} </span>
            <p class="price">
              <span style="color:#FF8198">
                {{ item.price }}
              </span>
              <van-icon name="star-o" />
              <span>
                {{ item.cfav }}
              </span>
            </p>
          </div>
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      wrap: ["流行", "新款", "精选"],
    };
  },
  created() {
    this.$store.dispatch("SHOP_LIST");
    this.$store.dispatch("SHOP_LIST2");
    this.$store.dispatch("SHOP_LIST3");
  },
  computed: {
    List: function() {
      return this.$store.state.list.List;
    },
    List2: function() {
      return this.$store.state.list.List2;
    },
    List3: function() {
      return this.$store.state.list.List3;
    },
  },
  methods: {
    goDel(iid) {
      this.$router.push({
        name: "detail",
        query: {
          iid: iid,
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.body {
  padding-bottom: 210px;
  .header {
    width: 100%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    box-sizing: border-box;
    margin-bottom: 100px;
    // background: floralwhite;
    &.header div {
      margin: 10px 10px 0px 10px;
      padding-top: 50px;
      width: 45%;
      // background: orangered;
      .img1 {
        width: 100%;
        height: 400px;
        border-radius: 20px;
      }
      .title {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
        overflow: hidden;
      }
      .price {
        margin-left: 60px;
      }
    }
  }
}
</style>
